<template>
  <div class="introduction">
    <h1>WebGL介绍</h1>
    <p>WebGL（Web Graphics Library）是一个基于OpenGL ES的JavaScript API，用于在网页浏览器中渲染3D图形。它允许我们直接在浏览器中创建高性能的3D图形和2D图形，而无需安装任何插件。</p>
    <h2>主要特点</h2>
    <ul>
      <li>基于HTML5 Canvas元素</li>
      <li>支持硬件加速</li>
      <li>跨平台和浏览器兼容</li>
      <li>可编程渲染管线</li>
    </ul>
    <h2>学习路径</h2>
    <el-timeline>
      <el-timeline-item timestamp="第一步" placement="top">
        <el-card>
          <h4>了解基础概念</h4>
          <p>WebGL上下文、着色器、缓冲区等基本概念</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="第二步" placement="top">
        <el-card>
          <h4>掌握Canvas操作</h4>
          <p>Canvas的基本使用和WebGL上下文获取</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="第三步" placement="top">
        <el-card>
          <h4>学习着色器编程</h4>
          <p>顶点着色器和片元着色器的编写</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<style scoped>
.introduction {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #303133;
  margin-bottom: 20px;
}

h2 {
  color: #409EFF;
  margin: 30px 0 20px;
}

p {
  line-height: 1.6;
  color: #606266;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
  color: #606266;
}

li {
  margin: 10px 0;
}

.el-timeline {
  margin-top: 30px;
}

.el-card {
  margin-bottom: 10px;
}
</style>